<template>
  <div class="container">
    <img v-if="isShow" class="index_img" :src="userInfo.avatarUrl" alt="">
    <button class="btn" v-if="!isShow" open-type="getUserInfo" @getuserinfo="getUserInfo">点击获取用户信息</button>
    <p class="username">hello {{userInfo.nickName}}</p>
    <p class="gompvue" @tap.stop='toList'>开启小程序之旅</p>
  </div>
</template>

<script>
export default {
  data(){
    return {
      userInfo:{},
      isShow:false
    }
  },
  methods: {
    // 获取用户信息
    getUserInfo(){
      wx.getUserInfo({
        success:res=>{
          console.log(res)
         if(res.rawData){
           this.userInfo = res.userInfo;
          console.log(this.userInfo)
          this.isShow = true;
         }
          
        },
        fail:()=>{
          console.log('shibai')
        }
      })
    },
    toList(){
      console.log(1)
      wx.navigateTo({
        url:'/pages/list/main'
      })
    }
  },
  beforeMount() {
    this.getUserInfo()
  },
}
</script>
<style>
page {
  background-color: #ff0;
}
  .container {
    display: flex;
    height:100vh;
    flex-direction: column;
    align-items :center;
    justify-content: space-around;
  }
  .index_img {
    width:200rpx;
    height: 200rpx;
    border-radius: 50%;
  }
  .username {
    font-size: 38rpx;
    font-weight: 800;
  }
  .gompvue {
    width:300rpx;
    height:50rpx;
    font-size: 24rpx;
    border:1rpx solid #ccc;
    line-height: 50rpx;
    text-align: center;
    border-radius: 10rpx;
    box-shadow: 0 0 5rpx rgba(0,0,0,.1);
  }
  .btn {
    width:300rpx;
    height:300rpx;
    border-radius: 50%;
    font-size: 30rpx;
    line-height: 300rpx;
  }
</style>
